<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<!-- <HeadCustom title="积分规则" :isAppBtn="false" :isHome="false"></HeadCustom> -->
		
		<!-- #ifdef H5 -->
		<HeadCustom title="积分规则" :isAppBtn="false" :isHome="false"></HeadCustom>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<HeadCustom title="积分规则"></HeadCustom>
		<!-- #endif -->
		<view class="wrap">
			<view class="rule-list">
				<view class="rule-item" v-for="(item, index) in dataList" :key="index">
					<view class="fboxRow Ycenter">
						<view class="fboxCol flex1">
							<view class="tit font32 lh44">{{ item.taskTitle }}</view>
							<view class="con mt8 font24 lh34 color-747986">{{ item.taskDesc }}</view>
						</view>
						<view class="btn fboxRow Ycenter Xcenter font24 color-FFD9B5">{{ item.taskPointDesc }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { pointDetail, pointTasksList } from '@/api/mine.js';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
import { getRequest } from '@/static/js/common.js';
export default {
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			page: {
				size: 10,
				current: 1,
				total: 0,
				loading: 'loading'
			},
			pointsNum: 0,
			dataList: [],
			isApp: false
		};
	},
	onLoad(option) {
		if (option.benwu) {
			let benwu = utf8to16(base64decode(option.benwu));
			const token = {
				access_token: getRequest(benwu, 'token'),
				statusBarHeight: getRequest(benwu, 'statusBarHeight')
			};
			getApp().globalData.statusBarHeight = token.statusBarHeight;
			uni.setStorageSync('bw_params', JSON.stringify(token));
		}
		if (option && option.isApp) {
			this.isApp = option.isApp == 1 ? true : false;
		}
		this.getInit();
	},
	onReachBottom() {
		if (this.page.size * this.page.current < this.page.total) {
			this.page.loading = 'loading';
			this.page.current = this.page.current + 1;
			this.getList();
		} else {
			this.page.loading = 'nomore';
		}
	},
	onPullDownRefresh() {
		this.page.current = 1;
		this.page.size = 20;
		this.getInit();
	},
	methods: {
		getInit() {
			pointDetail().then(res => {
				this.pointsNum = res.data.point;
				this.getList();
			});
		},
		getList() {
			pointTasksList(this.page).then(res => {
				this.dataList = this.dataList.concat(res.data.list);
				this.page.total = res.data.total;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.page-wrap{ min-height: calc(100vh); background-color: var(--controllerBgColor);}
.head {
	padding: 40rpx 0 50rpx 34rpx;
	background: #e67b57 url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/mine/points.png') no-repeat bottom center/cover;
}
.head .num {
	padding-top: 26rpx;
	font-size: 90rpx;
	line-height: 126rpx;
}
.head .record {
	line-height: 54rpx;
}
.rule-btn {
	width: 148rpx;
	height: 56rpx;
	background: #f6b95c;
	border-radius: 60rpx 0rpx 0rpx 60rpx;
}
.tit{
	color: var(--titleFontColor);
}
.con{
	color: var(--contentFontFourColor);
}
.rule-list {
	padding: 0 40rpx;
}
.rule-item {
	padding: 40rpx 0;
	border-bottom: 1rpx dashed var(--backgroundDivisionColor);
}
.rule-item .btn {
	margin-left: 40rpx;
	padding: 0 10rpx;
	min-width: 120rpx;
	height: 48rpx;
	background: var(--pureButtonBackOneColor);
	border-radius: 8rpx;
}
.color-747986 {
	color: #747986;
}
.color-FFD9B5 {
	color: var(--contourButtonTextColor);
}
.rule-tips {
	padding: 40rpx 40rpx 60rpx;
}
</style>
